<template>
    <div>
        <Head></Head>
         <main>
          <table>
              <tr class="head">
                  <td>头像</td>
                  <td>用户名</td>
                  <td>注册时间</td>
                  <td>手机号</td>
                  <td>操作</td>
              </tr>
              <tr class="content" v-for="item,i in userList" :key="i">
                  <td ><img style="width:60px;height:60px;border-radius:50%;margin-left:2vw;margin-top:1vw;"  :src="$img+item.user_img" alt=""></td>
                  <td>{{item.username}}</td>
                  <td>{{item.user_time}}</td>
                  <td>{{item.phone}}</td>
                  <td>
                      <button>编辑</button>
                      <button style="color:white;background-color:#ff4949">删除</button>
                 </td>
                 
              </tr>
          </table>
           

      </main>
      <el-pagination
            background
            @current-change="change"
            layout="prev, pager, next"
            :total="lastYe">
            </el-pagination>
    </div>
</template>

<script>
import Head from '../components/head'
import {ajax_userList} from '../ajax/index'
export default {
    name: '',
    data(){
        return{
            userList:[],
            quanxian:'',
            lastYe:1,
            yeNum:1,
        }
    },
    created(){
        ajax_userList({
            yeNum:1,
        }).then(data=>{
            console.log(data)
            this.userList=data.userList;
            this.lastYe=data.ye;
            // console.log("xie"+data.userList)
        })
    },
    filters:{
       quan(e){
        //    console.log(e)
           if(e==11){
               return "超级管理员"
           }else if(e==1){
               return "管理员"
           }else{
               return "配送员"
           }
       }
    },
    methods:{
       change(num){
            // console.log(num)
            this.yeNum=num
             ajax_userList(
            {
               yeNum:this.yeNum
            }
        ).then(data=>{
            // console.log(data.shopList);
            this.userist=data.userList;
            this.lastYe=data.ye
            console.log("fei"+data.ye)
            // console.log(data.ye)
        })
        },
    },
    components:{
        Head,
    }
}
</script>

<style scoped>
main{
  width: 92%;
  margin: 20px auto;
}
table{
    width:100%;
    border: 1px solid gray;
    border-collapse: collapse;
}
table tr{
    border: gray !important;
   
}
tr td:nth-child(n+2){
    width: 23.6%;
}
.head{
    background-color: #eef1f6;
    
}
.head td{
   padding: 8px 0;
   font-weight: 700;
}
/* td{
    text-align: left;
} */
.content{
    position: relative;
}

.content td{
    height: 50px;
    line-height: 50px;
    /* text-align: left; */
    border-top: 1px solid #ebeff3;
}
td button{
    border: none;
    outline: none;
    padding: 2px 5px;
    border-radius: 6px;
    margin: 0 5px;
    border: 1px solid gainsboro;
    background-color: white;
}
.jian{
    width: 50px;
    padding: 0 12px;
    /* position: absolute; */
    /* margin-left: 30px; */
    /* margin-right: 30px; */
}
</style>